<template>
  <el-drawer v-model="visibleDrawer" :destroy-on-close="true" :with-header="false" size="50%">
    <el-form :model="formModel" ref="formRef">
      <el-form-item label="题目标题:">
        <el-input style="width:387px !important" v-model="formQuestion.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="题目难度:">
        <QuestionSelector style="width:387px !important" v-model="formQuestion.difficulty" width="100%"
          placeholder="请选择题目难度">
        </QuestionSelector>
      </el-form-item>
      <el-form-item label="时间限制（单位毫秒）:">
        <el-input style="width:300px !important" v-model="formQuestion.timeLimit" placeholder="请输入时间限制"></el-input>
      </el-form-item>
      <el-form-item label="空间限制（单位字节）:">
        <el-input style="width:300px !important" v-model="formQuestion.spaceLimit" placeholder="请输入空间限制"></el-input>
      </el-form-item>
      <el-form-item label="题目内容:">
        <div class="editor">
          <quill-editor placeholder="请输入题目内容" v-model:content="formQuestion.content" content-type="html"></quill-editor>
        </div>
      </el-form-item>
      <el-form-item label="题目用例:">
        <el-input style="width:387px !important" v-model="formQuestion.questionCase" placeholder="请输入题目用例"></el-input>
      </el-form-item>
      <el-form-item label="默认代码块:">
        <code-editor @update:value="handleEditorContent" ref="defaultCodeRef"></code-editor>
      </el-form-item>
      <el-form-item label="main函数:">
        <code-editor @update:value="handleEditorMainFunc" ref="mainFucRef"></code-editor>
      </el-form-item>
      <el-form-item>
        <el-button class="question-button" type="primary" plain @click="onSubmit()">发布</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
// 导入必要的组件和库
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import CodeEditor from './CodeEditor.vue'
import QuestionSelector from './QuestionSelector.vue';
import { ref, reactive } from 'vue';
import { addQuestionService, getQuestionDetailService, editQuestionService } from '@/apis/question';
import { ElMessage } from "element-plus";

// 定义响应式状态变量
const visibleDrawer = ref(false)
const formQuestion = reactive({
  questionId: '', // 题目ID
  title: '', // 题目标题
  difficulty: '', // 题目难度
  content: '', // 题目内容
  questionCase: '', // 题目用例
  timeLimit: '', // 时间限制
  spaceLimit: '', // 空间限制
  defaultCode: '', // 默认代码
  mainFuc: '' // main函数
})

// 引用代码编辑器组件
const defaultCodeRef = ref()
const mainFucRef = ref() // 自定义代码编辑器组件引用

// 异步函数，用于打开抽屉并加载题目详情
async function open(questionId) {
  visibleDrawer.value = true
  // 清除表单数据
  for (const key in formQuestion) {
    if (formQuestion.hasOwnProperty(key)) {
      formQuestion[key] = '';
    }
  }
  // 如果提供了questionId，获取题目详情并填充表单
  if (questionId) {
    const questionDetail = await getQuestionDetailService(questionId)
    Object.assign(formQuestion, questionDetail.data) // 将获取的题目详情填充到表单
    defaultCodeRef.value.setAceCode(formQuestion.defaultCode)
    mainFucRef.value.setAceCode(formQuestion.mainFuc)
  }
}

// 暴露open函数以便在组件外部使用
defineExpose({
  open
})

// 函数用于验证表单数据
function validate() {
  let msg = ''
  if (!formQuestion.title) {
    msg = '请添加题目标题'
  } else if (formQuestion.difficulty === '') {
    msg = '请选择题目难度'
  } else if (!formQuestion.timeLimit) {
    msg = '请输入时间限制'
  } else if (!formQuestion.spaceLimit) {
    msg = '请输入空间限制'
  } else if (!formQuestion.content) {
    msg = '请输入题目内容信息'
  } else if (!formQuestion.questionCase) {
    msg = '请输入题目用例名称'
  } else if (!formQuestion.defaultCode) {
    msg = '请输入默认代码'
  } else if (!formQuestion.mainFuc) {
    msg = '请输入main函数'
  } else {
    msg = ''
  }
  return msg
}

// 定义事件，用于通知父组件操作成功
const emit = defineEmits(['success'])

// 异步函数，用于处理表单提交
async function onSubmit() {
  const errorMessage = validate()
  if (errorMessage) {
    ElMessage.error(errorMessage);
    return false
  }
  const fd = new FormData()
  for (let key in formQuestion) {
    fd.append(key, formQuestion[key])
  }
  // 如果存在questionId，则编辑题目，否则添加新题目
  if (formQuestion.questionId) {
    await editQuestionService(fd)
    ElMessage.success('编辑成功')
    emit('success', 'edit')
  } else {
    await addQuestionService(fd)
    ElMessage.success('添加成功')
    emit('success', 'add')
  }
  visibleDrawer.value = false
}

// 函数用于处理代码编辑器内容更新
function handleEditorContent(content) {
  formQuestion.defaultCode = content
}

// 函数用于处理main函数编辑器内容更新
function handleEditorMainFunc(content) {
  formQuestion.mainFuc = content
}
</script>

<style lang="scss">
.question-button {
  width: 200px;
}
</style>